<template>
  <div id="AbnormalBusiness">
    <div class="homeTitle jianguan">异常业务分析</div>
    <div class="contentBox">
      <div class="goucheng">
        <div class="title">异常业务预警构成</div>
        <div class="Gbox">
          <div class="GboxLeft">
            <div class="circle" ref="myChart"></div>
            <div class="tip">
              <p>
                疑似虚增负债：
                <span>{{drawLineData.liabilities}}条</span>
              </p>
              <p>
                疑似资产代持：
                <span>{{drawLineData.behalf}}条</span>
              </p>
              <p>
                疑似资产出表：
                <span>{{drawLineData.outTable}}条</span>
              </p>
              <p>
                疑似违规投资：
                <span>{{drawLineData.invest}}条</span>
              </p>
            </div>
          </div>
          <div class="Gboxright">
            <p>
              <span>统计日期从：</span>
              <el-date-picker v-model="dateStart" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" size="small"></el-date-picker>
            </p>
            <p>
              <span>统计日期至：</span>
              <el-date-picker v-model="dateEnd" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" size="small"></el-date-picker>
            </p>
            <p>
              <el-tooltip :content="banks? banks: '未选择任何行社/机构'" placement="top">
                <el-button
                  type="primary"
                  style="margin-right: 30px;"
                  @click="morechoose"
                  size="small"
                >切换行社\机构</el-button>
              </el-tooltip>
              <el-button type="primary" size="small"  @click="getjianguan">查询</el-button>
            </p>
          </div>
        </div>
      </div>
      <div class="qushi">
        <div class="title">异常业务预警规模</div>
        <div class="danwei">
          <span>单位：万元</span>
        </div>
        <div class="zhexian" ref="zhexian"></div>
        <div class="time">
          <div class="timeLeft">
            <div class="timeTip">统计时间:</div>
            <el-radio-group v-model="radio">
              <el-radio :label="7">7天</el-radio>
              <el-radio :label="30">30天</el-radio>
              <el-radio :label="60">60天</el-radio>
              <el-radio :label="90">90天</el-radio>
              <el-radio :label="180">180天</el-radio>
              <el-radio :label="360">360天</el-radio>
            </el-radio-group>
          </div>
          <div class="timeRight">
            <el-tooltip :content="banks1? banks1: '未选择任何行社/机构'" placement="top">
              <el-button
                type="primary"
                style="margin-right: 30px;"
                @click="morechoose1"
                size="small"
              >切换行社\机构</el-button>
            </el-tooltip>
            <el-button type="primary" size="small" @click="guimo">查询</el-button>
          </div>
        </div>
      </div>
      <!-- ----------------------------------- -->
      <div class="qushi">
        <div class="title">异常业务预警趋势</div>
        <div class="danwei">
          <span>单位：万元</span>
        </div>
        <div class="zhexian two" ref="shuzhuang"></div>
        <div class="time">
          <div class="timeLeft">
            <div class="timeTip">统计时间:</div>
            <el-radio-group v-model="radio1">
              <el-radio :label="7">7天</el-radio>
              <el-radio :label="30">30天</el-radio>
              <el-radio :label="60">60天</el-radio>
              <el-radio :label="90">90天</el-radio>
              <el-radio :label="180">180天</el-radio>
              <el-radio :label="360">360天</el-radio>
            </el-radio-group>
          </div>
          <div class="timeRight">
            <el-tooltip :content="banks2? banks2: '未选择任何行社/机构'" placement="top">
              <el-button
                type="primary"
                style="margin-right: 30px;"
                @click="morechoose2"
                size="small"
              >切换行社\机构</el-button>
            </el-tooltip>
            <el-button type="primary" size="small" @click="qushi">查询</el-button>
          </div>
        </div>
      </div>
      <!-- ----------------------------------- -->
      <div class="qushi" v-if="qId == 1">
        <div class="title">异常业务预警TOP10</div>
        <div class="zhexian two" ref="shuzhuang1"></div>
        <div class="time">
          <div class="timeLeft">
            <div class="timeTip">统计时间:</div>
            <el-radio-group v-model="radio2">
              <el-radio :label="7">7天</el-radio>
              <el-radio :label="30">30天</el-radio>
              <el-radio :label="60">60天</el-radio>
              <el-radio :label="90">90天</el-radio>
              <el-radio :label="180">180天</el-radio>
              <el-radio :label="360">360天</el-radio>
            </el-radio-group>
          </div>
          <div class="timeRight">
            <el-button type="primary" size="small" @click="top10">查询</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AbnormalBusiness",
  data() {
    return {
      dateStart: "",
      dateEnd: "",
      banks: "",
      banksId: [],
      banks1: "",
      banksId1: [],
      radio:360,
      radio1: 360,
      banks2: "",
      banksId2: [],
      radio2: 360,
      drawLineData: '',
      qId: ''
    };
  },
  created () {
    let user = JSON.parse(sessionStorage.getItem('user'));
    this.qId = user.qId;
  },
  mounted() {
    this.getjianguan();
    this.guimo();
    this.qushi();
    this.top10();
  },
  methods: {
     // 异常业务预警构成
    getjianguan () {
      let obj = {startDate: this.dateStart, endDate: this.dateEnd, bankId: this.banksId.join(',')};
      this.axios.get('unusualWarn/countWarnConstituteByBankId', {params: this.filterNoneObj(obj)})
        .then(({data})=> {
          let drawLineData = [
              { value: data.data.invest, name: "疑似违规投资"},
              { value: data.data.liabilities, name: "疑似虚增负债"},
              { value: data.data.outTable, name: "疑似资产出表"},
              { value: data.data.behalf, name: "疑似资产代持"}
            ]
          this.drawLineData = data.data;
          this.drawLine(drawLineData);
        })
    },
    guimo () {
      let obj = {date: this.radio, bankId: this.banksId1.join(',')};
      this.axios.get('unusualWarn/countWarnScaleByBankId',{params: this.filterNoneObj(obj)})
        .then(({data})=> {
          let drawLine1Time = [];
          let drawLine1exceed = [];
          let drawLine1alarm = [];
          data.data.forEach((item, index)=> {
            drawLine1Time.push(item.createTime);
            drawLine1exceed.push(item.liabilities);
            drawLine1alarm.push(item.asset);
          })
          this.drawLine1(drawLine1Time,drawLine1exceed,drawLine1alarm);
        })
    },
    qushi () {
      let obj = {date: this.radio1, bankId: this.banksId2.join(',')};
      this.axios.get('unusualWarn/countWarnTrendByBankId',{params: this.filterNoneObj(obj)})
        .then(({data})=> {
          let drawLine1Time = [];
          let drawLine1exceed = [];
          data.data.forEach((item, index)=> {
            drawLine1Time.push(item.createTime);
            drawLine1exceed.push(item.total);
          })
          this.drawLine2(drawLine1Time,drawLine1exceed);
        })
    },
    top10 () {
      if (this.qId == 1) {
        let obj = {date: this.radio2};
        this.axios.get('unusualWarn/countWarnCase',{params: this.filterNoneObj(obj)})
          .then(({data})=> {
            let drawLine1Time = [];
            let drawLine1exceed = [];
            data.data.forEach((item, index)=> {
              drawLine1Time.push(item.warnBank);
              drawLine1exceed.push(item.total);
            })
            this.drawLine3(drawLine1Time,drawLine1exceed);
          })
      }
    },
    morechoose() {
      this.$bus.$emit("chooseBank", {
        callback: banks => {
          let banksName = [];
          let banksId = [];
          banks.forEach((item, index) => {
            banksName.push(item.bName);
            banksId.push(item.bId);
          });
          this.banks = banksName.join(",");
          this.banksId = banksId;
        }
      });
    },
    morechoose1() {
      this.$bus.$emit("chooseBank", {
        callback: banks => {
          let banksName = [];
          let banksId = [];
          banks.forEach((item, index) => {
            banksName.push(item.bName);
            banksId.push(item.bId);
          });
          this.banks1 = banksName.join(",");
          this.banksId1 = banksId;
        }
      });
    },
    morechoose2() {
      this.$bus.$emit("chooseBank", {
        callback: banks => {
          let banksName = [];
          let banksId = [];
          banks.forEach((item, index) => {
            banksName.push(item.bName);
            banksId.push(item.bId);
          });
          this.banks2 = banksName.join(",");
          this.banksId2 = banksId;
        }
      });
    },
    drawLine(drawLineData) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart);
      // 绘制图表
      myChart.setOption({
        calculable: true,
        tooltip: {
          trigger: "item"
          // formatter: (data)=> {return data.data.name+'：'+data.data.value+'%'
        },
        series: [
          {
            name: "异常业务预警",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            data: drawLineData
          }
        ]
      });
    },
    drawLine1(drawLine1Time,drawLine1exceed,drawLine1alarm) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.zhexian);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["负债方", "资产方"]
        },
        // grid: {
        //   left: "3%",
        //   right: "4%",
        //   bottom: "3%",
        //   containLabel: true
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: drawLine1Time
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "负债方",
            type: "line",
            stack: "总量",
            data: drawLine1exceed
          },
          {
            name: "资产方",
            type: "line",
            stack: "总量",
            data: drawLine1alarm
          }
        ]
      });
    },
    drawLine2(drawLine1Time,drawLine1exceed) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.shuzhuang);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: drawLine1Time
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "异常业务预警趋势",
            data: drawLine1exceed,
            type: "line"
          }
        ]
      });
    },
    drawLine3(drawLine1Time,drawLine1exceed) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.shuzhuang1);
      // 绘制图表
      myChart.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: drawLine1Time,
            // axisTick: {
            //   alignWithLabel: true
            // }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "异常业务预警TOP10",
            type: "bar",
            barWidth: "60%",
            data: drawLine1exceed
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss">
#AbnormalBusiness {
  .contentBox {
    background: rgba(255, 255, 255, 0.7);
  }
  .jianguan {
    color: black;
    background: white;
  }
  .title {
    font-size: 18px;
  }
  .goucheng {
    margin-top: 20px;
    padding: 20px;
    .Gbox {
      display: flex;
      height: 350px;
      .GboxLeft {
        display: flex;
        justify-content: space-between;
        .circle {
          width: 400px;
          height: 350px;
        }
        .tip {
          height: 350px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          p {
            line-height: 40px;
            span {
              color: #666666;
            }
          }
        }
      }
      .Gboxright {
        margin-left: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        > p {
          line-height: 70px;
        }
      }
    }
  }
  .qushi {
    margin-top: 10px;
    padding: 20px;
    .danwei {
      color: #666666;
      text-align: right;
    }
    .zhexian {
      width: 100%;
      height: 400px;
    }
    .time {
      display: flex;
      height: 80px;
      align-items: center;
      .timeLeft {
        display: flex;
        height: 80px;
        align-items: center;
        .timeTip {
          margin-right: 20px;
        }
      }
      .timeRight {
        margin-left: 70px;
      }
    }
  }
}
</style>
